<template>
	<view>
		<view class="uni-comment-list">
			<view class="uni-comment-face">
				<image :src="comments.avatarUrl" class="avatar-comm-img"></image>
			</view>
			<view class="uni-comment-body">
				<view class="uni-comment-top comment-nickname">
					<text>{{comments.nickName}}</text>
				</view>
				<view class="uni-comment-date comment-date">
					<text>{{sendTime(comments.sendTime)}}</text>
				</view>
				<view class="uni-comment-content comment-content" @click="clickComment">
					{{comments.commentContent}}
				</view>
				<view class="fun-comment-reply unfoldComment" v-if="comments.childList && comments.childList.length > 0 && !unfoldComment" @click="unfold">
					<text space="emsp">——  展开{{comments.childList.length}}条评论  ——</text>
				</view>
				<view class="fun-comment-reply" v-if="comments.childList && comments.childList.length > 0 && unfoldComment">
					<block v-for="(item, index) in childList" :key="index">
						<fun-replay-comments :reComments="item" @clickReplayComment="clickReplayComment"></fun-replay-comments>
					</block>
					<view class="showMore" @click="showMore">{{showMoreText}}
						<text class="iconfont icon-gengduo1" :class="haveMore ? 'genduo':'nogenduo'"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import funReplayComments from '@/components/funReplayComments/funReplayComments.vue';
	export default {
		data() {
			return {
				childList:[],
				childListSize:3,
				haveMore:true,
				showMoreText:'查看更多 ',
				unfoldComment:false
			};
		},
		props:{
			comments:{
				type:Object,
				default:function(){
					return {}
				}
			},
			commentsIndex:{
				type:Number,
				default:0
			}
		},
		components:{
			funReplayComments
		},
		created() {
		},
		watch: {
			comments:{
				immediate:true,
				handler(newValue, oldValue) {
					this.childList = this.comments.childList ? this.comments.childList.slice(0,this.childListSize) : []
				},
				 deep:true
			}
		},
		methods:{
			sendTime(time){
				return this.$utils.dateTime(time)
			},
			showMore(){
				if(!this.haveMore){
					this.childListSize = 1
					this.childList = this.comments.childList.slice(0,3)
					this.haveMore = true
					this.unfoldComment = false
					this.showMoreText = "查看更多"
					return
				}
				this.childListSize += 5
				this.childList = this.comments.childList.slice(0,this.childListSize)
				if(this.childListSize >= this.comments.childList.length){
					uni.showToast({
						icon:'none',
					    title: "没有更多评论了~",
					    duration: 2000
					});
					this.haveMore = false
					this.showMoreText = "点击收起"
				}
			},
			clickReplayComment(e){
				this.$emit("clickReplayComment",{reComments:e,commentsIndex:this.commentsIndex})
			},
			clickComment(){
				this.unfold()
				this.$emit("clickReplayComment",{reComments:{...this.comments},commentsIndex:this.commentsIndex})
			},
			unfold(){
				this.unfoldComment = true
			}
		}
	}
</script>

<style lang="scss"scoped>
	.uni-comment-list{
		.uni-comment-face{
			width: 60rpx;
			height: 60rpx;
			.avatar-comm-img{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
		}
		.uni-comment-body{
			.comment-nickname{
				padding: 0;
				font-size: 20rpx;
				text{
					color: $fun-text-6-color;
				}
			}
			.comment-date{
				font-size: 16rpx;
				color: $fun-text-9-color;
			}
			.comment-content{
				padding: 10rpx 0;
				font-size: 24rpx;
				color: $fun-text-color;
			}
			.fun-comment-reply{
				flex-wrap: wrap;
				font-size: 24rpx;
				margin-top: 4rpx;
				.showMore{
					text-align: center;
					transform: translateX(-20px);
					color: #999;
					.genduo{
						display: inline-block;
						transform: rotatez(90deg);
					}
					.nogenduo{
						display: inline-block;
						transform: rotatez(-90deg);
					}
				}
				
			}
			.unfoldComment{
				color: #999;
				padding: 10rpx 0;
			}
		}
	}
	
</style>
